<template>
	<view style="padding-bottom: 40rpx;">
		<u-navbar :background="background" :is-back="false" :title="title" :border-bottom="false">
		</u-navbar>
		<!-- 登录信息 -->
		<view class="info flex align-center justify-center">
			<view class="info-box">
				<view @click="token?goNav('/pages/me/userinfo'):goNav('/pages/login/login')"
					class="info-box-c flex align-center justify-between">
					<view class="info-box-c-l flex align-center">
						<view class="info-box-c-l-avatar">
							<image :src="avatar?avatar:'../../static/images/logo.png'" mode=""></image>
						</view>
						<view class="info-box-c-l-name">
							<view class="info-box-c-l-name-t">
								{{userName?userName:'未登录'}}
							</view>
							<view class="info-box-c-l-name-b" v-if="invitationCode">
								ID:{{invitationCode}}
							</view>
						</view>
					</view>
					<view class="info-box-c-r">
						<u-icon name="arrow-right" color="#F6F6F6" size="28"></u-icon>
					</view>
				</view>
			</view>
		</view>
		<!-- 统计 -->
		<view class="statistics flex align-center justify-center">
			<view class="statistics-box flex align-center justify-between">
				<view class="statistics-box-item" @click="goNav('/me/jilu/myLove')">
					<view class="statistics-box-item-top">
						{{myLoveNum}}
					</view>
					<view class="statistics-box-item-btn">
						我的收藏
					</view>
				</view>
				<view class="statistics-box-item" @click="goNav('/me/jilu/histor')">
					<view class="statistics-box-item-top">
						{{myZhui}}
					</view>
					<view class="statistics-box-item-btn">
						我的追剧
					</view>
				</view>
				<view class="statistics-box-item" @click="goNav('/me/jifen/jifen')">
					<view class="statistics-box-item-top">
						{{jifen}}
					</view>
					<view class="statistics-box-item-btn">
						我的积分
					</view>
				</view>
			</view>
		</view>
		<view class="money flex align-center justify-center" v-if="isWxIosPay == true">
			<view class="money-box flex align-center justify-between">
				<view class="">
					<view class="money-box-title flex align-center">
						<view class="money-box-title-l">
							金币余额
						</view>
						<view @click="isShoMoney = !isShoMoney" class="money-box-title-r" style="margin-left: 12rpx;">
							<u-icon :name="isShoMoney?'eye':'eye-off'" color="#5A4A32" size="40"></u-icon>
						</view>
					</view>
					<view class="money-box-price">
						<block v-if="isShoMoney">
							{{formatNumber(moneyNum)}}
						</block>
						<block v-else>
							****
						</block>
					</view>
				</view>
				<view class="money-box-btn" @click="goNav('/me/wallet/wallet')">
					立即充值
				</view>
			</view>
		</view>
		<view v-if="isVips == '是' && isWxIosPay == true" class="vip flex align-center justify-center">
			<view class="vip-box flex align-center justify-between">
				<view class="vip-box-l">
					<view class="vip-box-l-l flex align-center">
						{{isVIP?'会员用户':'开通会员'}}
						<image src="../../static/images/me/Vips.png" mode=""></image>
					</view>

					<view class="vip-box-l-r" v-if="isVIP">
						{{endTime?endTime+'到期':'您是尊贵的永久会员'}}
					</view>
					<view class="vip-box-l-r" v-else>
						{{endTime?endTime+'到期':'升级VIP，省更多钱'}}
					</view>
				</view>
				<view v-if="!isVIP" @click="goNav('/pages/me/vip/index')"
					class="vip-box-r flex align-center justify-center">
					立即开通
				</view>
			</view>
		</view>
		<!-- 钱包 -->
		
		<!-- 常用工具 -->
		<view class="tool flex align-center justify-center">
			<view class="tool-box">
				<view class="tool-box-content flex align-center justify-between flex-wrap">
					<view class="tool-box-content-item flex align-center justify-center flex-wrap"
						@click="goNav('/me/wallet/mingxi')">
						<view class="tool-box-content-item-img">
							<image src="../../static/images/me/mingxi.png" mode=""></image>
						</view>
						<view class="tool-box-content-item-txt">
							钱包明细
						</view>
					</view>
					<!-- <view v-if="kmPaySel != '否'" @click="openKaMiShow()"
						class="tool-box-content-item flex align-center justify-center flex-wrap">
						<view class="tool-box-content-item-img">
							<image src="../../static/images/me/kami.png" mode=""></image>
						</view>
						<view class="tool-box-content-item-txt">
							卡密兑换
						</view>
					</view> -->
					<!-- <view class="tool-box-content-item flex align-center justify-center flex-wrap"
						@click="goNav('/me/invite/index')">
						<view class="tool-box-content-item-img">
							<image src="../../static/images/me/vfx.png" mode=""></image>
						</view>
						<view class="tool-box-content-item-txt">
							分享好友
						</view>
					</view> -->
					<!-- <view class="tool-box-content-item flex align-center justify-center flex-wrap"
						@click="goNav('/me/message/index')">
						<view class="tool-box-content-item-img">
							<image src="../../static/images/me/messige.png" mode=""></image>
						</view>
						<view class="tool-box-content-item-txt">
							消息中心
						</view>
						<u-badge :offset="[0,20]" type="error" :count="numCount"></u-badge>
					</view> -->
					<view class="tool-box-content-item flex align-center justify-center flex-wrap"
						@click="goNav('/me/jilu/jilu')">
						<view class="tool-box-content-item-img">
							<image src="../../static/images/me/vlishi.png" mode=""></image>
						</view>
						<view class="tool-box-content-item-txt">
							观看历史
						</view>
					</view>
					<!-- <view v-if="rate>0" class="tool-box-content-item flex align-center justify-center flex-wrap"
						@click="goNav('/me/invite/inviteDet')">
						<view class="tool-box-content-item-img">
							<image src="../../static/images/me/vtd.png" mode=""></image>
						</view>
						<view class="tool-box-content-item-txt">
							我的团队
						</view>
					</view> -->
					<!-- <view class="tool-box-content-item flex align-center justify-center flex-wrap" @click="goMsg()">
						<view class="tool-box-content-item-img">
							<image src="../../static/images/me/vkf.png" mode=""></image>
						</view>
						<view class="tool-box-content-item-txt">
							联系客服
						</view>
					</view> -->
					<!-- <view class="tool-box-content-item flex align-center justify-center flex-wrap"
						@click="goNav('/me/feedbackIndex/feedbackIndex')">
						<view class="tool-box-content-item-img">
							<image src="../../static/images/me/bangzhu.png" mode=""></image>
						</view>
						<view class="tool-box-content-item-txt">
							帮助中心
						</view>
					</view> -->
					<view class="tool-box-content-item flex align-center justify-center flex-wrap"
						@click="goNav('/me/feedback/index')">
						<view class="tool-box-content-item-img">
							<image src="../../static/images/me/yijian.png" mode=""></image>
						</view>
						<view class="tool-box-content-item-txt">
							退款申请
						</view>
					</view>
					<view class="tool-box-content-item flex align-center justify-center flex-wrap"
						@click="goNav('/me/setting/index')">
						<view class="tool-box-content-item-img">
							<image src="../../static/images/me/setting.png" mode=""></image>
						</view>
						<view class="tool-box-content-item-txt">
							设置中心
						</view>
					</view>
					<view class="tool-box-content-item flex align-center justify-center flex-wrap" style="height: 0;">

					</view>
				</view>
			</view>
		</view>
		<!-- 卡密兑换弹窗 -->
		<u-popup @close="kami = ''" v-model="showCard" mode="center" border-radius="14" :closeable="true">
			<view class="kami">
				<view class="kami-title">
					卡密兑换
				</view>
				<view class="kami-input">
					<u-input v-model="kami" placeholder="请输入卡密" type="text" :border="true" />
				</view>
				<view @click="exchangeKaMi()" class="kami-btn flex align-center justify-center">
					确认兑换
				</view>
			</view>
		</u-popup>
		<!-- 抖音im客服 -->
		<ttMsg />

	</view>
</template>

<script>
	import ttMsg from '../../components/ttMsg/ttMsg.vue'
	export default {
		components: {
			ttMsg
		},
		data() {
			return {
				background: {
					backgroundImage: 'linear-gradient(to right, #FFE5EA 0%, #E4F5FB 49%, #FFF0EE 100%)'
				},
				kami: '', //卡密
				isShoMoney: false, //是否显示余额
				avatar: '../../static/images/logo.png',
				img: '../../static/images/me/huiyuan.png',
				swiperList: [{
					imageUrl: '../../static/images/me/banner.png',
				}],
				isLogin: false,
				userName: '未登录',
				isVIP: false,
				invitationCode: '',
				token: '',
				endTime: '', //会员到期时间
				moneyNum: 0, //余额
				jifen: 0, //积分
				isVips: '否', //是否显示会员
				myLoveNum: 0, //我的喜欢个数
				myZhui: 0, //我的追剧数量
				showCard: false,
				numCount: 0,
				rate: 0,
				kmPaySel: '否',
				isWxIosPay: true, //微信下是否显示支付功能
			}
		},
		onLoad() {
			this.getBannerList()
		},
		onShow() {
			this.isWxIosPay = uni.getStorageSync('isWxIosPay')
			this.kmPaySel = this.$queue.getData('kmPaySel');
			this.numCount = uni.getStorageSync('numCount')
			this.isVips = uni.getStorageSync('isVips') ? uni.getStorageSync('isVips') : '否'
			this.token = uni.getStorageSync('token')
			if (this.token) {
				this.getMyMoney()
				this.getJifen()
				this.$u.api.userinfo().then(res => {
					if (res.code == 0 && res.data) {
						uni.setStorageSync('zhiFuBao', res.data.zhiFuBao)
						uni.setStorageSync('zhiFuBaoName', res.data.zhiFuBaoName)
						uni.setStorageSync('userName', res.data.userName)
						uni.setStorageSync('avatar', res.data.avatar)
						this.userName = res.data.userName
						this.avatar = res.data.avatar
						this.invitationCode = res.data.invitationCode
						if (res.data.rate) {
							this.rate = (Number(res.data.rate) * 100).toFixed(0)
						} else {
							this.rate = 0
						}
					}
				})

				let data = {
					userId: uni.getStorageSync('userId')
				}
				this.$u.api.userVip(data).then(res => {
					if (res.code == 0 && res.data && res.data.isVip == 2) {
						this.isVIP = true;
						this.endTime = res.data.endTime
						uni.setStorageSync('isVIP', true)
					} else {
						this.isVIP = false;
						this.endTime = ''
						uni.setStorageSync('isVIP', false)
					}
				})

				this.isLogin = true
				this.userName = uni.getStorageSync('userName')
				this.isVIP = uni.getStorageSync('isVIP')
				this.getMyLoveNum()
				this.getMyZhuiNum()
			} else {
				this.isLogin = false
				this.isVIP = false
				this.endTime = '' //会员到期时间
				this.moneyNum = 0 //余额
				this.jifen = 0 //积分
				this.userName = '未登录'
				this.invitationCode = ''
				this.myLoveNum = 0
				this.myZhui = 0
				this.rate = 0
			}
			this.avatar = uni.getStorageSync('avatar') ? uni.getStorageSync('avatar') : '../../static/images/logo.png'
		},
		methods: {
			//兑换卡密
			exchangeKaMi() {
				if (!this.kami) {
					uni.showToast({
						title: '请输入卡密',
						icon: 'none'
					})
					return
				}
				let data = {
					sdkContent: this.kami
				}
				this.$Request.postT('/app/sdkInfo/sdkExchange', data).then(res => {
					if (res.code == 0) {
						uni.showToast({
							title: '兑换成功'
						})
						this.showCard = false
						let datas = {
							userId: uni.getStorageSync('userId')
						}
						this.$u.api.userVip(datas).then(rest => {
							if (rest.code == 0 && rest.data && rest.data.isVip == 2) {
								this.isVIP = true;
								this.endTime = rest.data.endTime
								uni.setStorageSync('isVIP', true)
							} else {
								this.isVIP = false;
								this.endTime = ''
								uni.setStorageSync('isVIP', false)
							}
						})
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				})
			},
			openKaMiShow() {
				if (uni.getStorageSync('token')) {
					this.showCard = true
				} else {
					uni.navigateTo({
						url: "/pages/login/login"
					})
				}

			},
			//获取我喜欢的数量
			getMyLoveNum() {
				let data = {
					page: 1,
					limit: 1,
					classify: 2
				}
				this.$Request.getT('/app/courseCollect/selectByUserId', data).then(res => {
					if (res.code == 0) {
						this.myLoveNum = res.data.total
					} else {
						this.myLoveNum = 0
					}
				})
			},
			//获取我追剧的数量
			getMyZhuiNum() {
				let data = {
					page: 1,
					limit: 1,
					classify: 1
				}
				this.$Request.getT('/app/courseCollect/selectByUserId', data).then(res => {
					if (res.code == 0) {
						this.myZhui = res.data.total
					} else {
						this.myZhui = 0
					}
				})
			},
			/**
			 * 获取积分
			 */
			getJifen() {
				this.$Request.getT('/app/integral/selectByUserId').then(res => {
					if (res.code == 0) {
						this.jifen = res.data.integralNum
					} else {
						this.jifen = 0
					}
				})
			},
			/**
			 * @param {Number} num
			 * @param 保留两位小数
			 */
			formatNumber(num) {
				// 判断是否为整数
				if (Number.isInteger(num)) {
					return num.toFixed(2);
				} else {
					return num.toFixed(2).replace(/\.?0+$/, '');
				}
			},
			/**
			 * 获取余额
			 */
			getMyMoney() {
				this.$Request.getT('/app/moneyDetails/selectUserMoney').then(res => {
					if (res.code == 0) {
						this.moneyNum = res.data.money
						// this.$Request.getT('/app/invite/selectInviteMoney').then(ret => {
						// 	if (ret.code == 0) {
						// 		if (ret.data.inviteMoney && ret.data.inviteMoney.money) {
						// 			this.moneyNum = Number(res.data.money) + Number(ret.data.inviteMoney
						// 				.money)
						// 		} else {
						// 			this.moneyNum = Number(res.data.money)
						// 		}
						// 	}
						// })
					} else {

						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				})
			},
			goPage(url) {
				if (url) {
					if (url.indexOf('/pages/') !== -1 || url.indexOf('/me/') !== -1) {
						uni.navigateTo({
							url
						});
					} else {
						//#ifndef H5
						uni.navigateTo({
							url: '/pages/index/webView?url=' + url
						});
						//#endif
						//#ifdef H5
						window.location.href = url;
						//#endif	
					}
				}
			},
			goMsg() {
				let kefu = uni.getStorageSync('kefu'); // 用户端联系方式 1 手机号 2企业微信
				let kefuPhone = uni.getStorageSync('kefuPhone');
				if (kefu == 1) {
					uni.navigateTo({
						url: '/me/setting/kefu'
					})
				} else if (kefu == 3) {
					uni.makePhoneCall({
						phoneNumber: kefuPhone //仅为示例
					});
				} else if (kefu == 2) {
					// #ifdef MP-WEIXIN
					let that = this
					try {
						wx.openCustomerServiceChat({
							extInfo: {
								url: uni.getStorageSync('kefuUrl')
							},
							corpId: uni.getStorageSync('kefuAppId'),
							success(res) {},
							fail(res) {
								console.error(res)
							}
						})
					} catch (error) {
						console.error("catchcatch" + error)
						uni.showToast({
							title: '请更新至微信最新版本'
						});
					}
					// #endif
					// #ifndef MP-WEIXIN
					let url = uni.getStorageSync('kefuUrl');
					if (url.indexOf('/pages/') !== -1 || url.indexOf('/my/') !== -1) {
						uni.navigateTo({
							url
						});
					} else {
						//#ifndef H5
						uni.navigateTo({
							url: '/pages/index/webView?url=' + url
						});
						//#endif
						//#ifdef H5
						window.location.href = url;
						//#endif
					}
					// #endif
				}
			},
			goNav(e) {
				console.log(e)
				let token = uni.getStorageSync('token')
				if (token) {
					uni.navigateTo({
						url: e
					})
				} else {
					uni.navigateTo({
						url: "/pages/login/login"
					})
				}

			},
			// 获取轮播图列表
			getBannerList() {
				this.$u.api.bannerList({
					classify: '3'
				}).then(res => {
					if (res.code == 0 && res.data) {
						let arr = []
						res.data.forEach(ret => {
							if (ret.state == 1) {
								arr.push(ret)
							}
						})
						this.swiperList = arr
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						});
					}
				})
			},
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #F5F7FF;
	}

	/deep/.u-navbar-inner {
		/* #ifdef H5 */
		background: linear-gradient(to right, #FFE5EA 0%, #E4F5FB 49%, #FFF0EE 100%);
		/* #endif */
	}

	.kami {
		width: 500rpx;
		height: auto;
		background-color: #FFFFFF;

		.kami-title {
			width: 100%;
			text-align: center;
			margin-top: 30rpx;
			font-size: 30rpx;
			font-weight: bold;
		}

		.kami-input {
			padding: 30rpx;
		}

		.kami-btn {
			width: calc(100% - 60rpx);
			height: 80rpx;
			margin: 0 auto;
			background-color: #ff7581;
			border-radius: 44rpx;
			color: #FFFFFF;
			margin-top: 10rpx;
			margin-bottom: 40rpx;
		}
	}

	.info::before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: linear-gradient(to right, #FFE5EA 0%, #E4F5FB 49%, #FFF0EE 100%);
		z-index: 1;
		/* 确保在垂直渐变之上 */
	}

	.info::after {
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: linear-gradient(to bottom, transparent, #F5F7FF);
		/* 垂直渐变，结束颜色为透明 */
		z-index: 2;
		/* 确保在水平渐变之上 */
	}

	.info {
		width: 100%;
		height: auto;
		// height: 400rpx;
		background: #F5F7FF;
		position: relative;
		border-radius: 0 0 80rpx 80rpx;

		.info-box {
			width: 686rpx;
			height: 100%;
			position: relative;
			z-index: 3;
		}

		.info-box-c {
			width: 100%;
			height: 94rpx;
			// margin-top: 60rpx;
			margin-bottom: 140rpx;
		}

		.info-box-c-l-avatar {
			width: 94rpx;
			height: 94rpx;
			border-radius: 50%;

			image {
				width: 94rpx;
				height: 94rpx;
				border-radius: 50%;
			}
		}

		.info-box-c-l-name {
			margin-left: 16rpx;

			.info-box-c-l-name-t {
				color: #333333;
				font-size: 32rpx;
				font-weight: bold;
			}

			.info-box-c-l-name-b {
				color: #333333;
				font-size: 24rpx;
				font-weight: 400;
			}
		}
	}

	.statistics {
		width: 100%;
		height: auto;
		margin-top: -100rpx;
		position: relative;
		z-index: 3;

		.statistics-box {
			width: 686rpx;
			// height: 184rpx;
			// background-color: #FFFFFF;
			border-radius: 24rpx;
		}

		.statistics-box-item {
			// width: calc(100% / 3);
			// height: 100%;
		}

		.statistics-box-item-top {
			width: 100%;
			text-align: center;
			color: #333333;
			font-size: 38rpx;
			font-weight: bold;
		}

		.statistics-box-item-btn {
			width: 100%;
			text-align: center;
			color: #999999;
			font-size: 26rpx;
			// margin-top: 20rpx
		}
	}

	.vip {
		width: 100%;
		// height: 84rpx;
		margin-top: 30rpx;

		.vip-box {
			width: 686rpx;
			height: 100%;
			background: linear-gradient(90deg, #FEF5E4 0%, #FBECD7 100%);
			border-radius: 24rpx;
			padding: 26rpx 30rpx;
		}

		.vip-box-l {
			image {
				width: 24rpx;
				height: 22rpx;
				margin-left: 6rpx;
			}
		}

		.vip-box-l-l {
			font-size: 32rpx;
			font-weight: 800;
			color: #5A4A32;
			line-height: 32rpx;
		}

		.vip-box-l-r {
			color: #817858;
			font-size: 26rpx;
			margin-top: 6rpx;
		}

		.vip-box-r {
			width: 130rpx;
			height: 50rpx;
			background: #FFFFFF;
			box-shadow: 0rpx -3rpx 9rpx 0rpx rgba(255, 255, 255, 0.46);
			border-radius: 25rpx;
			color: #5A4A32;
			font-size: 22rpx;
		}
	}

	.money {
		width: 100%;
		height: auto;
		margin-top: 20rpx;

		.money-box {
			width: 686rpx;
			height: 100%;
			border-radius: 24rpx;
			background: #ffffff;
			padding: 30rpx;
		}

		.money-box-btn {
			background: linear-gradient(90deg, #35bc3a 0%, #35bc3a 100%);
			border-radius: 44rpx;
			padding: 18rpx 30rpx;
			font-size: 24rpx;
			color: #ffffff;
			font-weight: bold;
		}

		.money-box-title-l {
			color: #333333;
			font-size: 28rpx;
			font-weight: normal;
		}

		.money-box-price {
			color: #333333;
			font-size: 48rpx;
			font-weight: 800;
			margin-top: 20rpx;


		}


	}

	.tool {
		width: 100%;
		height: auto;
		margin-top: 20rpx;

		.tool-box {
			width: 686rpx;
			height: 100%;
			background-color: #FFFFFF;
			border-radius: 24rpx;
		}

		.tool-box-content {
			width: 100%;
			height: auto;
			padding: 30rpx 30rpx 0 30rpx;
		}

		.tool-box-content-item {
			width: 130rpx;
			height: auto;
			margin-bottom: 46rpx;
			position: relative;
		}

		.tool-box-content-item-img {
			width: 66rpx;
			height: 66rpx;

			image {
				width: 66rpx;
				height: 66rpx;
			}
		}

		.tool-box-content-item-txt {
			width: 100%;
			text-align: center;
			margin-top: 10rpx;
			color: #333333;
			font-size: 24rpx;
		}
	}
</style>